<template>
    <view class="content">
        <view class="login-logo">
            <image src="/static/login-logo.png"></image>
            <text>润滑卫士</text>
        </view>
        <view class="login">
            <form @submit="formSubmit" @reset="formReset">
                <view class="acount">
                    <input class="login-cont" name="input" v-model="account" placeholder="请输入账号" />
                </view>
                <view class="password">
                    <input class="login-cont" name="input" v-model="password" placeholder="请输入密码" />
                </view>

                <view class="login-btns">
                    <button class="login-btn" @click="loginSub">登录</button>
                </view>
            </form>
        </view>
    </view>
    <!-- <view class="login-wrap-tips">
            <checkbox-group @change="radioChange">
                <label class="radio">
                    <checkbox style="transform: scale(0.7)" value="1" :checked="isCheck" />
                    <text>您已阅读并同意</text>
                    <text class="btn btn-text btn-primary login-wrap-tips-btn" @click="onClickAgreement">《用户协议》</text>
                    以及
                    <text class="btn btn-text btn-primary login-wrap-tips-btn" @click="onClickPrivacy">《隐私政策》</text>
                </label>
            </checkbox-group>
        </view> -->
</template>


<script>
    import {
        login
    } from '@/common/api/login.js'
    export default {
        data() {
            return {
                isCheck: false,
                account: "",
                password: ""
            };
        },
        methods: {
            loginSub() {
                if (!this.account) {
                    uni.showToast({
                        title: '请输入账号',
                        icon: "error",
                        duration: 3000,
                    })
                    return false;
                }
                if (!this.password) {
                    uni.showToast({
                        title: '请输入密码',
                        icon: "error",
                        duration: 3000,
                    })
                    return false;
                }
                // 获取学习列表详情信息
                login({
                    account: this.account,
                    password: this.password
                }).then((res) => {
                    uni.setStorageSync("token", res.token)
                    uni.setStorageSync("role_id", res.role_id)
                    uni.setStorageSync("admin_id", res.id)
                    uni.setStorageSync("token-expire", res.expire)
                    uni.switchTab({
                        url: "/pages/index/index",
                    })
                }).catch((err) => {
                    console.error('失败', err);
                });
            }
            // radioChange() {
            //     this.isCheck = !this.isCheck;
            // },
            // onClickAgreement() {
            //     this.$Router.push("/pages/service-agreement/service-agreement");
            // },
            // onClickPrivacy() {
            //     this.$Router.push("/pages/service-agreement/service-agreement");
            // },
        },
    };
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .content {
        position: relative;
        display: flex;
        z-index: 1;
        flex-direction: row;
        height: 100%;
        min-height: 100vh;
        background: linear-gradient(180deg, #0d1523 0%, #102945 100%);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .login {
        width: 90%;
    }

    .login-logo {
        display: flex;
        margin-bottom: 60rpx;
    }

    .login-logo image {
        width: 100rpx;
        height: 100rpx;
        margin-right: 18rpx;
    }

    .login-logo text {
        font-size: 56rpx;
        font-family: PingFangSC-Regular;
        font-weight: 700;
        color: #fff;
    }

    .acount {
        margin-bottom: 15rpx;
    }

    .login-cont {
        display: block;
        width: 100%;
        flex: 1;
        height: 90rpx;
        padding: 8rpx 16rpx;
        box-sizing: border-box;
        border: none;
        background: #1b345f;
        outline: none;
        font-size: 28rpx;
        text-align: left;
        color: #fff;
        border-radius: 10rpx;
    }


    .login-btn {
        position: relative;
        display: block;
        text-align: center;
        font-size: 32rpx;
        border-radius: 10rpx;
        background-color: #1b345f;
        color: #fff;
        line-height: 86rpx;
        height: 90rpx;
        margin-top: 60rpx;
    }

    .login-wrap-tips {
        position: absolute;
        z-index: 4;
        width: 100%;
        bottom: 100rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #999;
        padding: 0 64rpx;
        text-align: center;
    }

    .login-wrap-tips-btn {
        font-size: 24rpx;
        color: #3f7dff;
    }
</style>